<template>
  <a-card>
    <div class="box-card">
      <a-tree
        id="AtreeBox"
        style="border: 1px solid;"
        show-line
        :default-expanded-keys="['0-0-0']"
        draggable
        @dragstart="handledragstart($event)"
        @dragend="handledragend($event)"
      >
        <a-icon slot="switcherIcon" type="down" />
        <a-tree-node key="0-0" title="parent 1">
          <a-tree-node key="0-0-0" title="parent 1-0">
            <a-tree-node key="0-0-0-0" title="leaf" />
            <a-tree-node key="0-0-0-1" title="leaf" />
            <a-tree-node key="0-0-0-2" title="leaf" />
          </a-tree-node>
          <a-tree-node key="0-0-1" title="parent 1-1">
            <a-tree-node key="0-0-1-0" title="leaf" />
          </a-tree-node>
          <a-tree-node key="0-0-2" title="parent 1-2">
            <a-tree-node key="0-0-2-0" title="leaf" />
            <a-tree-node key="0-0-2-1" title="leaf" />
          </a-tree-node>
        </a-tree-node>
      </a-tree>
      <div
        class="input-box"
        v-for="item in Object.keys(dataSrouce)"
        :key="item"
        :ref="item"
        :data-key="item"
        @drop.prevent="drop_handler($event, 1)"
        @dragover.prevent="dragover_handler($event, 2)"
      >
        {{ dataSrouce[item].value }}
      </div>
    </div>
  </a-card>
</template>

<script>
export default {
  data() {
    return {
      touchPElL: 0,
      touchPElT: 0,
      touchPElW: 0,
      selectKey: '',
      dataSrouce: {
        inputBox1: {
          targetElL: 0,
          targetElT: 0,
          targetW: 0,
          targetH: 0,
          //   树和a-input 之间的距离
          distance: 0,
          value: '没数据'
        },
        inputBox2: {
          targetElL: 0,
          targetElT: 0,
          targetW: 0,
          targetH: 0,
          //   树和a-input 之间的距离
          distance: 0,
          value: '没数据'
        }
      },
      pos: ''
    }
  },
  mounted() {},
  methods: {
    handledragstart({ event, node }) {
      console.log('树节点 拖拽开始');
      let el = event.target
      el.classList.add('a')
      console.log(el);
      let { title, pos } = node
      event.dataTransfer.setData('text/plain', pos)
      this.pos = pos
      event.dataTransfer.effectAllowed = 'move'
    },
    handledragend({ event, node }) {
      console.log('树节点 拖拽结束');
      console.log(event.dataTransfer.getData("text"));
    },
    drop_handler(event) {
      const value = event.dataTransfer.getData('text')
      console.log(value)
      const { key } = event.target.dataset
      if (key) {
        this.dataSrouce[key].value = this.pos
        this.pos = ''
      }
    },
    dragover_handler(ev) {
      ev.dataTransfer.dropEffect = 'move'
    }
  }
}
</script>

<style lang="less" scoped>
#AtreeBox {
  /deep/ .adraggable {
    pointer-events: inherit;
  }
}
.input-box {
  padding: 10px;
  border: 1px solid;
}
.box-card {
  border: 1px solid;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  cursor: pointer !important;
}

</style>
